<template>
  <div class="app-container">
    <div class="box ph-30">
      <div class="panel">
        <div class="panel-header">
          <h3 class="panel-title">填写报名信息</h3>
        </div>
        <div class="panel-body">
          <h3 class="text">食宿信息</h3>
          <el-table border :data="trainData.hotelList" style="width: 100%">
            <!-- <el-table-column type="selection" width="50" /> -->
            <el-table-column label="序号" type="index" width="50" />
            <el-table-column label="酒店名称" prop="name">
              <template #default />
            </el-table-column>
            <el-table-column label="酒店地址" prop="address"> </el-table-column>
            <el-table-column label="房型" prop="houseType" width="100p">
            </el-table-column>
            <el-table-column label="价格" prop="spend" width="100px">
            </el-table-column>
            <el-table-column label="入住时间" prop="moveIntoTime" width="460px">
              <template #default="props">
                <el-row>
                  <div
                    v-for="(item, index) in props.row.move"
                    :key="index"
                    @click="onPick(props.row)"
                  >
                    <el-date-picker
                      v-model="item.moveIntoTime"
                      value-format="YYYY-MM-DD"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="入住时间"
                      end-placeholder="离店时间"
                      :disabledDate="disabledDate"
                      @change="changeTime"
                    />
                    <span
                      v-if="props?.row?.move?.length > 1"
                      @click="delHot(item, props.row)"
                      ><el-icon><Close /></el-icon
                    ></span>
                  </div>
                  <div>
                    <span class="iconSpan" @click="addHot(props.row)"
                      ><el-icon><Plus /></el-icon
                    ></span>
                  </div>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column label="餐食" width="100px">
              <template #default="props">
                <div v-if="props.row.haveDinner == 1">是</div>
                <div v-else>否</div>
              </template>
            </el-table-column>
            <el-table-column label="房间数量" prop="houseCount" width="100px" />
            <el-table-column label="剩余房间数量" width="140px">
              <template #default="props">
                <!-- <div>
                  {{ props?.row?.move[0]?.moveIntoTime }}
                </div> -->
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
              <template #default="props">
                <el-checkbox v-model="props.row.flag" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="panel-footer text-center">
          <el-button type="success" plain round @click="goPrev()"
            >上一步</el-button
          >
          <el-button type="success" round @click="goNext()">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import * as train from "@/api/train/pc";
import { useRoute, useRouter } from "vue-router";
import { dayjs } from "element-plus";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const flag = ref(false);
const data = reactive({
  trainData: {},
  matchId: "",
});
const firstTime = ref();
const lastTime = ref();
const { matchId, trainData } = toRefs(data);

onMounted(() => {
  matchId.value = route.query.matchId;
  initData();
});

async function initData() {
  let res = await train.getTrainDetails({ id: route.query.id });
  trainData.value = res.data;
  let id = dayjs().valueOf();
  console.log(id);
  trainData.value.hotelList.forEach((item) => {
    item.flag = false;
    item.move = [];
    item.move.push({
      name: item.name,
      id: id,
      MoveId: item.id,
      moveIntoTime: [
        item.moveIntoTime.slice(0, 10),
        item.leaveTime.slice(0, 10),
      ],
    });
  });
}

// 添加入住时间
function addHot(item) {
  let id = new Date().getTime();
  item.move.push({
    name: item.name,
    id: id,
    MoveId: item.id,
    moveIntoTime: [item.moveIntoTime, item.leaveTime],
  });
}

// 删除入住时间
function delHot(val, item) {
  item.move = item.move.filter((a) => {
    return val.id != a.id;
  });
}

function changeTime(e) {
  console.log(e);
}

// 前n天
function getNextDate(date, day) {
  var dd = new Date(date);
  dd.setDate(dd.getDate() + day);
  var y = dd.getFullYear();
  var m =
    dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
  var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
  return y + "-" + m + "-" + d;
}

// 点击时限制日期
function onPick(row) {
  lastTime.value = row.leaveTime;
  firstTime.value = getNextDate(row.moveIntoTime, -1);
}

// 时间限制
function disabledDate(time) {
  return (
    time.getTime() <= new Date(firstTime.value).getTime() ||
    time.getTime() > new Date(lastTime.value).getTime()
  );
}

function submitForm() {
  return new Promise(async (resolve, reject) => {
    let list = JSON.parse(JSON.stringify(trainData.value.hotelList));
    let arr = [];
    let array = [];
    let arrHot = [];
    list.forEach((item) => {
      if (item.flag) arr.push(item.move);
    });
    arr.forEach((item) => {
      item = Array.from(new Set(item));
      item.forEach((val) => {
        array.push(val);
      });
    });
    array.forEach((item) => {
      // item.moveIntoTime = Array.from(new Set(item.moveIntoTime));//去重
      arrHot.push({ hotlId: item.MoveId, move: item.moveIntoTime.join() });
    });
    let res = null;
    let from = {
      hotelIdsArray: arrHot,
      projectIdsArray: trainData.value.projectIdList,
      examIdsArray: trainData.value.examIdList,
      venueId: trainData.value.venueId,
      trainId: trainData.value.id,
      id: trainData.value.signId,
    };

    res = await train.signUp(from);
    if (res.code == 200) {
      flag.value = true;
      proxy.$modal.msgSuccess("操作成功");
      return resolve();
    } else {
      return reject();
    }
  });
}

// 下一步
async function goNext() {
  if (flag.value) {
    router.push({
      name: "trainBill",
      query: {
        id: trainData.value.id,
        venueId: trainData.value.venueId,
      },
    });
  } else {
    await submitForm();
    if (flag.value)
      router.push({
        name: "trainBill",
        query: {
          id: trainData.value.id,
          venueId: trainData.value.venueId,
        },
      });
  }
}

// 上一步
async function goPrev() {
  if (flag.value) {
    router.go(-1);
  } else {
    await submitForm();
    if (flag.value) router.go(-1);
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 0;
  background: #f5f7f9;
}

.text {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #000000;
}

.panel-footer .el-button--success {
  background: linear-gradient(270deg, #39dba7, #38ef7d);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.panel-footer .el-button--success.is-plain {
  background: #fff;
  border: 1px solid #2ed981;
  color: #2ed981;
}

.chooseForm {
  :deep(.el-form-item__content) {
    background: rgba(245, 247, 249, 0.38);
    padding: 20px 40px 10px;
  }

  .el-checkbox {
    height: auto;
  }

  :deep(.el-checkbox__input) {
    position: absolute;
    right: 0;
    top: 0;
  }

  .name {
    text-align: center;
  }
}
.iconSpan {
  position: relative;
  top: 0.2rem;
  margin-left: 5px;
}
</style>
